import React, { useState } from 'react'
import {Form,Input,Button} from "antd-mobile"
import request from "../../api/request";
import { useNavigate } from 'react-router-dom';

function Zhuc() {
    const navigate=useNavigate();
    const [disabled,setDisabled]=useState(true)
    const [form]=Form.useForm();
    const onFinish=async(value)=>{
        console.log(value)
        const res=await request.post("/register",value)
        console.log(res.data)
        navigate('/login')
    }
    const hanldeVilad=()=>{
        form.validateFields(["tel","password"])
        .then(()=>{
            setDisabled(true)
        })
        .catch(()=>{
            setDisabled(false)
        })
    }
  return (
    <div>
      <Form form={form} onFinish={onFinish} layout='horizontal' footer={
          <Button block type='submit' color='primary' size='large' disabled={disabled}>
            注册
          </Button>
        }>
        <Form.Item label='账号' name='tel' rules={[{ required: true, message: '账号不能为空' },{min:11,max:11,message:"请输入正确账号"}]}>
            <Input placeholder='请输入账号' onChange={()=>hanldeVilad()}></Input>
        </Form.Item>
        <Form.Item label='密码' name='password' onChange={()=>hanldeVilad()} rules={[{ required: true, message: '密码不能为空' }]}>
            <Input placeholder='请输入密码'></Input>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Zhuc
